<template>
  <div id="app" v-cloak v-if="nav">
    <top-bar v-on:toggle="toggleSideMenu"></top-bar>
    <transition name="slide">
      <side-menu v-show="sideMenuShow" :show="sideMenuShow" v-on:toggle="toggleSideMenu"></side-menu>
    </transition>
    <router-view />
    <div class="arrow-down" v-show="showDownArrow"></div>
  </div>
</template>

<script>
  import topBar from './components/topBar/topBar'
  import sideMenu from './components/sideMenu/sideMenu'
  import { mapGetters, mapActions, mapMutations } from 'vuex'
  import { tokenAjax, setStroge } from 'src/util/tokenAjax'
  const { wxShareConfig: { shareTitle, shareDesc, shareLink, shareImg } } = require('../var')

  export default {
    name: 'App',
    data () {
      return {
        shareTitle: shareTitle,
        shareDesc: shareDesc,
        shareLink: shareLink,
        shareImg: shareImg
      }
    },
    components: {
      topBar,
      sideMenu
    },
    computed: {
      ...mapGetters([
        'showDownArrow',
        'sideMenuShow',
        'nav'
      ])
    },
    methods: {
      _shareAPI () {
        this.getShareData({
          url: location.href
        }).then(data => {
          data = {
            ...data, debug: false, jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone",
              "chooseImage", "getNetworkType", "hideOptionMenu", "showOptionMenu", "hideMenuItems",
              "showMenuItems", "hideAllNonBaseMenuItem", "showAllNonBaseMenuItem", "closeWindow"
            ]
          }
          window.wx.config(data)
          this.setWeiXinShare()
        })
      },
      toggleSideMenu () {
        this.setSideMenuState(!this.sideMenuShow)
      },
      ...mapActions([
        'getNavList',
        'getShareData'
      ]),
      ...mapMutations({
        setBottomState: 'SET_BOTTOM_NAV_SATATE',
        setSideMenuState: 'SET_SIDE_MENU_STATE'
      }),
      setWeiXinShare () {
        var _this = this
        window.wx.ready(function () {
          window.wx.onMenuShareTimeline({
            title: _this.shareTitle,
            link: _this.shareLink,
            imgUrl: _this.shareImg,
            success: function () {
              if (_this.isLogin) {
                _this.addTimes()
              }
            }
          })
          window.wx.onMenuShareAppMessage({
            title: _this.shareTitle,
            desc: _this.shareDesc,
            link: _this.shareLink,
            imgUrl: _this.shareImg,
            success: function () {
              if (_this.isLogin) {
                _this.addTimes()
              }
            }
          })
          window.wx.onMenuShareQQ({
            title: _this.shareTitle,
            desc: _this.shareDesc,
            link: _this.shareLink,
            imgUrl: _this.shareImg,
            success: function () {
              if (_this.isLogin) {
                _this.addTimes()
              }
            }
          })
          window.wx.onMenuShareQZone({
            title: _this.shareTitle,
            desc: _this.shareDesc,
            link: _this.shareLink,
            imgUrl: _this.shareImg,
            success: function () {
              if (_this.isLogin) {
                _this.addTimes()
              }
            }
          })
        })
      },
    },
    watch: {
      '$route' () {
        this.shareLink = location.href
        this._shareAPI()
      }
    },
    created () {
      const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      const hasBottom = width / height > 414 / 660
      this.setBottomState(hasBottom)
      tokenAjax().then((res) => {
        if (res) {
          setStroge(res)
        }
        this.getNavList()
        this._shareAPI()
      })
    }
  }
</script>

<style lang="scss">
  html,
  body,
  .hight100 {
  	height: 100%;
  	width: 100%;
  	max-width: 100%;
  	min-width: 320px;
  }
  .mint-indicator-wrapper,
  .mint-indicator-mask {
  	z-index: 999;
  }
  [v-cloak] {
  	display: none !important;
  }
  .bg000-opcity {
  	position: relative;
  	&::after {
  		position: absolute;
  		content: '';
  		width: 100%;
  		height: 100%;
  		left: 0;
  		top: 0;
  		background-color: rgba(0, 0, 0, 0.3);
  	}
  }
  .inline-element:after {
  	content: '\A';
  	white-space: pre;
  }
  #app {
  	height: 100%;
  	font-family: 'Avenir', Helvetica, Arial, sans-serif;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	max-width: 750px;
  	margin: 0 auto;
  }
  .main-swiper {
  	height: 100%;
  }
  .arrow-down {
  	position: absolute;
  	z-index: 10;
  	left: 50%;
  	bottom: rem(50);
  	transform: translateX(-50%);
  	width: rem(66);
  	height: rem(34);
  	background-image: url('./assets/images/down.png');
  	background-size: cover;
  	opacity: 0;
  	animation: arrowDown 2s ease-in-out infinite;
  	outline: none;
  }

  @keyframes arrowDown {
  	0% {
  		transform: translate(-50%, rem(-22));
  		opacity: 0.3;
  	}
  	100% {
  		transform: translate(-50%, 0);
  		opacity: 1;
  	}
  }
  .slide-enter-active {
  	transition: all 0.3s ease;
  }
  .slide-leave-active {
  	transition: all 0.3s ease;
  }
  .slide-enter,
  .slide-leave-to {
  	transform: translateX(rem(-480));
  	opacity: 0;
  }
</style>
